<template>
    <el-autocomplete v-model="model" :fetch-suggestions="remoteMethod" :popper-class="textAlign"
    placeholder="请输入关键词" @select="handleSelect" style="width:100%"></el-autocomplete>
</template>

<script>
import { querySchoolByName } from 'api/common';

export default {
    props: {
        value: {
            type: [String, Number],
            required: true
        },
        provinceId: {
            type: [String, Number]
        },
        cityId: {
            type: [String, Number]
        },
        areaId: {
            type: [String, Number]
        }
    },
    computed: {
        model: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val);
            }
        }
    },
    watch: {
        provinceId(val) {
            this.$emit('change', '');
            this.$emit('input', '');
        },
        cityId(val) {
            this.$emit('change', '');
            this.$emit('input', '');
        },
        areaId(val) {
            this.$emit('change', '');
            this.$emit('input', '');
        }
    },
    data() {
        return {
            list: null,
            textAlign: '',
            schoolName: '' // 缓存学校名字
        }
    },
    created() {
        this.schoolName = this.value;
    },
    methods: {
        remoteMethod(query, cb) {
            query = query.trim();
            if (query=='') {
                cb([{value: '无数据'}]);
                this.textAlign = 'remote-center';
            }
            if (this.schoolName!=query && this.schoolName!='') {
                this.$emit('change', '');
            }
            if (query) {
                querySchoolByName(query, this.provinceId, this.cityId, this.areaId).then(response => {
                    this.list = response.data.content;
                    if (this.list=='') {
                        this.textAlign = 'remote-center';
                        return;
                    }
                }).then(() => {
                    let results = this.list.filter(this.createStateFilter(query));
                    if (results.length) {
                        this.textAlign = '';
                        cb(results)
                    } else {
                        this.textAlign = 'remote-center';
                        cb([{value: '无数据'}]);
                    }
                });
            } 
        },
        // 过滤
        createStateFilter(query) {
            return (state) => {
                state.value = state.schoolName; 
                return (state.value.toLowerCase().includes(query.toLowerCase()));
            };
        },
        // 获取id
        handleSelect(val) {
            if (val.schoolId) {
                this.schoolName = val.schoolName; // 获取缓存学校名字
                this.$emit('change', val.schoolId);
                this.$emit('getSchoolInfor', val);
            } else {
                this.$emit('input', '');
            }
        }
    }
}
</script>

<style>
</style>
